<template>
  <div>
    <el-dialog
      :title="titleInfo"
      :visible="dialogStatus"
      width="500px"
      @close="closeVehicleStatus"
    >
      <div class="header">
        <div class="title" style="text-align: left">
          确定要启用吗? 车辆启用需满足以下条件：
        </div>

        <div class="content">
          <span>1、车辆信息已完善</span>
          <span>2、车辆绑定司机>=2，且已设置排班</span>
        </div>
      </div>
      <div slot="footer" class="dialog-footer" style="text-align: right">
        <el-button class="save-btn" @click="confirmInfo" size="small"
          >确认</el-button
        >
        <el-button class="cancel-btn" @click="closeVehicleStatus" size="small"
          >取消</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { truckStatusUse, truckStatusNoUse } from '@/api/transit'

export default {
  // 工作状态 0：停用 1：启用
  name: 'vehicleStatus',
  data() {
    return {
      dialogStatus: false,
      vehicleInfo: {},
      isClose: true
    }
  },
  emits: ['changeStatus'],
  methods: {
    // 显示弹框
    showVehicleStatus(vehicleInfo) {
      this.vehicleInfo = vehicleInfo
      this.dialogStatus = true
    },
    // 关闭弹框
    closeVehicleStatus() {
      if (this.isClose) this.$message('已取消')
      this.dialogStatus = false
    },

    async confirmInfo() {
      // 执行启用

      // debugger
      let res = null
      if (this.vehicleInfo.workStatus === 0) {
        // console.log('启用')
        res = await truckStatusUse(this.vehicleInfo.id)

        if (res.code !== 200) {
          this.$message.error(res.msg)
        } else {
          this.$message.success('恭喜你，车辆启用成功！')
          this.$emit('changeStatus')
        }
      } else {
        // console.log('停用')
        res = await truckStatusNoUse(this.vehicleInfo.id)
        if (res.code !== 200) {
          this.$message.error(res.msg)
        } else {
          this.$message.success('车辆停用成功！司机已解除绑定。')
          this.$emit('changeStatus')
        }
      }
      this.isClose = false
      // 鲁AQD758
      this.dialogStatus = false
    }
  },
  computed: {
    titleInfo() {
      const msg = '车辆'
      return this.vehicleInfo.workStatus === 0 ? msg + '启用' : msg + '停用'
    }
  }
}
</script>

<style scoped lang="scss">
.header {
  padding: 0 10px;

  margin-bottom: 30px;
  .content {
    display: flex;
    margin-top: 25px;
    justify-content: space-between;
  }
}

.save-btn {
  background-color: #e15536;
  color: #ffffff;
  width: 75px;
  border-radius: 5px;
  font-weight: 400;
  border: 1px solid #e15536;
  &:hover {
    background: #ffab98;
    border: 1px solid #ffab98;
  }
}
.cancel-btn {
  width: 75px;
  color: #2a2929;
  border: 1px solid #d8dde3;
  border-radius: 5px;
  font-weight: 400;
  &:hover {
    background: #ffeeeb;
    border: 1px solid #f3917c;
    color: #e15536;
  }
}
</style>
